<template>
  <div>
    <!-- 顶部 -->
    <!-- <van-search
      left=""
      v-model="value"
      background="#4fc08d"
      :label="citem"
      placeholder="请输入小区或地址"
      show-action
    >
      <template #left>
        <div @click="onSearch">
          <van-icon name="arrow-left" size="20" color="#fff" />·
        </div>
      </template>
      <template #action>
        <div @click="onSearch">
          <van-icon name="location-o" size="20" color="#fff" />
        </div>
      </template>
    </van-search> -->
    <header>
      <span @click="$router.go(-1)">&lt;</span>
      <router-link to="/houselist">{{ city }}</router-link>
      <input type="text" placeholder="请输入小区或地址" />
      <van-icon name="guide-o" color="#fff" size="30px" @click="toMap" />
    </header>
    <!-- 下拉框 -->
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
      <van-dropdown-item v-model="value3" :options="option3" />
      <van-dropdown-item v-model="value4" :options="option4" />
    </van-dropdown-menu>

    <van-card
      v-for="item in houseList"
      :key="item.houseCode"
      :price="item.price"
      :desc="item.desc"
      :title="item.title"
      :thumb="'http://liufusong.top:8080' + item.houseImg"
      @click="housesDetial(item.houseCode)"
    >
      <template #tags>
        <van-tag color="#e1f5f8" text-color="#39becd"> 近地铁 </van-tag>
      </template>
    </van-card>
  </div>
</template>

<script>
import axios from 'axios'
// import { getCity } from '@/api/area'

export default {
  name: 'FindHouse',
  // props:{
  //   name:{
  //     type:String,
  //     required:true
  //   }
  // },
  data () {
    return {
      citem: '上海',
      value: '',
      houseList: null,
      value1: 0,
      value2: 'a',
      value3: 0,
      value4: 'a',
      option1: [
        { text: '区域', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 }
      ],
      option2: [
        { text: '方式', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' }
      ],
      option3: [
        { text: '租金', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 }
      ],
      option4: [
        { text: '筛选', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' }
      ]
    }
  },

  async created () {
    const { data } = await axios({ url: 'http://liufusong.top:8080/houses' })

    console.log(data)
    this.houseList = data.body.list
    console.log(this.houseList)

    // console.log(this.citem)
    // const id = this.$router.params.citem
    // console.log(id)
  },

  methods: {
    toMap () {
      this.$router.push('/map')
    },

    // 进入房屋详情
    // @click="housesDetial(item.houseCode)"
    housesDetial (id) {
      // console.log(id);
      this.$router.push(
        {
          name: 'detail',
          params: {
            id
          }
        },
        () => {}
      )
    }
    // housesDetial (code) {
    //   const infoArr = this.houseList.filter(item => {
    //     return item.houseCode === code
    //   })
    //   // console.log(infoArr);
    //   // console.log(code)
    //   this.$router.push(
    //     {
    //       name: 'detail',
    //       query: {
    //         infoArr: infoArr.houseCode
    //       }
    //     },
    //     () => {}
    //   )
    // }
  },
  computed: {
    city () {
      return localStorage.getItem('myCity')
    }
  }
}
</script>

<style scoped lang="less">
header {
  display: flex;
  align-items: center;
  height: 50px;
  background-color: rgb(33, 185, 122);
  span {
    color: #fff;
    font-size: 30px;
    margin: 0 10px;
  }
  a {
    width: 50px;
    height: 34px;
    background-color: #fff;
    text-align: center;
    line-height: 34px;
  }
  input {
    height: 30px;
    width: 230px;
  }
  .van-icon {
    margin: 0 10px;
  }
}
</style>
